<template>
  <div>
    <van-search
      v-model='value'
      placeholder='请输入搜索关键词'
      show-action
      shape='round'
      @search='searchClicked'
      @input="searchChanged"
      @clear="clearClicked"
    >
      <!-- @search='searchClicked' 类似于 @keyup.enter.native='todologin'(在这儿不行,只能在单纯的input框) 因为这是封装的组件,只能写search事件 -->
      <van-tag round slot='action' @click='searchClicked'>搜索</van-tag>
    </van-search>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, Tag } from 'vant'
Vue.use(Search).use(Tag)
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    searchClicked () {
      this.$emit('search-click', this.value)
    },
    searchChanged () {
      this.$emit('search-change', this.value)
    },
    clearClicked () {
      this.$emit('clear-search')
    }
  },
  watch: {
    $route: function (val, oldval) {
      if (val.name === 'Show-city') {
        this.value = ''
      }
    }
  }
}
</script>
